<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧农业大数据</title>
    <script src="/static/home/js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <style>
        .top{width: 100%;height: 150px;border-bottom: 3px solid #88caa5;background-color: #40a8d00f
        }
        .top img{width: 25%;height: 150px;float:left;}
        .zhihui {float:left;font-size: 50px;height: 150px;line-height: 80px;margin-left:20%;  letter-spacing: 30px;width: 50%}
        .huadong {float: left;  margin-top: -60px;  margin-left: 37%;  height: 40px;  width: 45%;  border: 0px solid #f0fffd;  }
        .huadong span{height: 40px;line-height: 40px;font-size: 30px;letter-spacing: 10px}
        .top_right{float: right;margin-top: -30px;margin-right: 20px;width: 15%}
        ul{
            margin: 0 !important;
            padding:0 !important;
        }
        ul li{list-style: none;height: 150px;line-height: 150px;border: 1px solid #88caa5;
            background-color: #40a8d00f;text-align: center;font-size: 30px;font-weight: bold;
            font-family: 'Comic Sans MS', cursive, sans-serif}
        .tab .tab-menu{  width: 15%; height: 400px; float: left;  margin: 0;  padding: 0;}
        .tab-xian{width: 3%;float: left;}
        .tab .tab-iframes{ width: 80%;  float: left;margin-left: 3% }
        .change{
            background-color: #46cf51;
        }
    </style>
</head>
<body >
<div class="top">
    <img src="../images/1.jpg">
    <strong class="zhihui">智慧农业大数据</strong>
    <div class="huadong">
        <marquee  align="left" direction="left" behavior="scroll"  loop=-1 height=40 width=100% hspace=0 scrollamount=10
                  scrolldelay=1 vspace=0><font color=red><span>欢迎各位领导专家莅临指导</span></font></marquee>
    </div>
    <div class="top_right">
        <span id="linkweb">2019/7/12 上午11:45:13</span>
        <script>setInterval("linkweb.innerHTML=new Date().toLocaleString();",1000);</script>
    </div>
</div>
<div class="tab">
    <div class="tab-menu">
        <ul>
            <li class="change">实时数据</li>
            <li id="li2">历史数据</li>
            <li>设备控制</li>
        </ul>
    </div>
    <div class="tab-iframes">
        <iframe id="iframe1" style="width: 100%" src="{:url('real_time')}" scrolling="no"
                frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
        <iframe id="iframe2" src="{:url('history')}" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight;this.style.display='none'"
                style="width:  100%;" ></iframe>
        <iframe id="iframe3" src="{:url('control')}" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight;this.style.display='none'"
                style="width:  100%;"></iframe>
    </div>
    <div style="clear: both"></div>
</div>
</body>
</html>
<script>
    $("ul li").click(function(){
        //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
        var _index = $(this).index();
        //让内容框的第 _index 个显示出来，其他的被隐藏
        $(".tab-iframes>iframe").eq(_index).show().siblings().hide();
        //改变选中时候的选项框的样式，移除其他几个选项的样式
        $(this).addClass("change").siblings().removeClass("change");
    });

    var testiframe=document.getElementById("iframe2").contentWindow;
    var doc=testiframe.document;
    /*testiframe.scroll(0,doc.body.scrollHeight);*/
    testiframe.addEventListener("reload",function(e){
        alert("111");
//        return stopDefault(e);
    },false)
</script>